/*
Theme Name: VIP 
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0-wpcom
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: VIP 
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

 VIP is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/



/*

ffffff  white
000000  black
efefef  background
282828  main gray
004c74  main blue
ae0668  main purble
21c1ff  main cyan

ce1a6e  gradient purble
c2c9cc  active cyan
c66295  active purble
50284d  active violet

*/
*{
    outline: none;

}
a:hover{
	text-decoration: none;
}
.btn{
	white-space: normal !important;
}
@font-face {
    font-family: "Flat";
    src: url('fonts/JF-Flat-regular.eot');
    src: url('fonts/JF-Flat-regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/JF-Flat-regular.svg') format('svg'),
    url('fonts/JF-Flat-regular.woff') format('woff'),
    url('fonts/JF-Flat-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body{
    background-color: #efefef;
    font-family: 'Flat', sans-serif;
}
img{
    width: 100%;
    height: auto;
}
input,textarea{
	border-radius: 10px;
	border: 1px #21c1ff solid;
	font-size: 18px;
	padding: 5px 20px;
	
}
textarea{
	padding-top: 20px;

}
input[type=submit]{
	padding: 10px 20px;
	background: none;
}
.ninja-forms-form-wrap input[type=submit]{
	float: left;
}
.container,.container-fluid{
    max-width: 1000px;
    position: relative;
}
.headnav{
    height: 75px;
    background-color: #fff;
    margin-bottom: 0;
    z-index: 1;
}
.logo{
    position: relative;
    padding: 0;
}
.navbar-header{
    position: relative;
    width: 100% !important;
}
.headnav .navbar-header:before{
    content: '';
    background: #fff;
    width: 100px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: -8px;
    border-bottom-left-radius:50px;
    border-bottom-right-radius:50px;
    z-index: 0;
}

.navbar-header > button{
    top: 10px;
}
#mainNavbar>ul>li>a{
    font-size: 16px;
    background-color: #fff;
    color: #ae0668;
    padding: 25px 10px 0 10px;
    position: relative;
}

#mainNavbar>ul>li:hover>a,#mainNavbar>ul>li.open>a{
    background-color: #282828;
    color: #fff;
    height: 74px;
}
#mainNavbar span.listIcon{
    position: absolute;
    top: 45px;
    left: 50%;
    margin-left: -30px;
    font-size: 30px;
    width: 60px;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 50%;
    text-align: center;
    background-color: #282828;
    display: none;
}
.dropdown-menu li:last-child>span.listIcon{
    display: block !important;
    top: 0px !important;
    margin-left: -35px !important;
    width: 70px !important;
    color: #fff;
}
.dropdown-menu li:last-child{
    height: 40px;
    position: relative;
}
.dropdown-menu .divider{
    margin: 0;
    background-color: #525252;
}
#mainNavbar .dropdown-menu{
    padding: 0;
    background-color: #282828;  
}
#mainNavbar .dropdown-menu>li>a{
    color: #fff;
    font-size: 16px;
    padding: 15px 20px;
}
#mainNavbar .dropdown-menu>li>a:hover{
    color: #fff;
    background-color: #ae0668;
    
}
#mainNavbar>ul>li.current-menu-item>a>span.listIcon{
    background: #ae0668;
}
#mainNavbar>ul>li>a:hover>span.listIcon,#mainNavbar>ul>li.current-menu-item>a>span.listIcon{
    display: block;
}
#mainNavbar>ul>li.open>a>span.listIcon{
	display: none !important;
}
#mainNavbar>ul>li.current-menu-item>a{
    background-color: #ae0668;
    color: #fff;
    height: 74px;
}
#mainNavbar>ul>li>a{
    height: 73px;
}
.navbar-collapse.collapse{
    display: none!important;

}
.navbar-collapse.collapse.in{
    display: block!important;

}
.navbar-toggle {
    display: block !important;
}
@media (min-width :1020px){
    .navbar-collapse.collapse{
        display: block!important;
        height: auto!important;
        padding-bottom: 0;
        overflow: visible!important;
    }
    .navbar-toggle {
        display: none !important;
    }
    .navbar-header{
        width: auto;
    }
}

#services .slider-container{
    background : url('img/slider-bg.jpg') no-repeat center top;
    background-size: cover;
    color: #fff;
}

#services .caption{
    padding-top: 50px
}

#services .caption h2{
    font-size: 40px;
    text-align: center;
}
#services .caption h3{
    font-size: 36px;
    text-align: center;
}
#services .caption .description{
    font-size: 20px;
    text-align: center;
    margin: 45px 0;
}
#services .caption button{
    font-size: 20px;
    border-radius: 10px;
    border: 2px #fff dotted;
    padding: 10px 30px;
    text-align: center;
    outline: none;
    color: #fff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    background: none;
}
#services .caption button:hover{
    border-style: solid;
    background: rgba(255,255,255,.8);
    color: #ae0668;

}
#services .slideImage{
    margin: 45px 0 ;
}
#services .navigators{
    background: #E1E1E1;
    color: #282828;
    padding-top: 2px;
}
#services .navigators>.row{
    background: #fff;
    margin: 0;
}
#services .carousel-indicators{
    bottom: auto;
    top: auto;
    right: auto;
    left: auto;
    margin: 0 auto;
    width: auto;
    
}
#services .carousel-indicators>div{
    border-right:1px #efefef solid;
    cursor: pointer;
    padding-top: 20px;
    background-color: #fff;
    position: relative;
}
#services .carousel-indicators>div:first-child{
    border-right-color: #fff;
}
#services .carousel-indicators .active{
  /* fallback */
  background-color: #ce1a6e;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ce1a6e), to(#ae0668));
  background: -webkit-linear-gradient(top, #ce1a6e, #ae0668);
  background: -moz-linear-gradient(top, #ce1a6e, #ae0668);
  background: -ms-linear-gradient(top, #ce1a6e, #ae0668);
  background: -o-linear-gradient(top, #ce1a6e, #ae0668);
  color: #fff;
  padding-top: 22px;
  position: relative;
  top: -2px;
}
#services .carousel-indicators .active:before{
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    margin-left: -16px;
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 12px solid #ce1a6e;
}

#services .carousel-indicators .active .description{
    color: #fff;
}

#services .carousel-indicators>div h2{
    font-size: 18px;
}
#services .carousel-indicators>div .description{
    font-size: 14px;
    color: #818181;
}
#services .carousel-indicators>div span{
    font-size: 50px;
    line-height: 25px;
}


#about{
    background : url('img/sonic.png') center top no-repeat, url('img/about-bg.jpg') no-repeat center top;
    background-size: auto,cover;
    color: #fff;
    position: relative;
    top: -2px;
}

#about h1{
    margin-top: 60px;
    color: #21c1ff;
    margin-bottom: 30px;
}
#about .description{
    font-size: 16px;
    line-height: 1.5em;
    margin-bottom: 90px;
}
.aboutBlocks{
    margin-bottom: 50px;
}
.aboutBlocks a{
    position: relative;
    color: #fff;
    margin-bottom: 30px;

}
.aboutBlocks a> span{
    position: absolute;
    top: -30px;
    left: 50%;
    margin-left: -24px;
    width: 48px;
    font-size: 45px;
    color: #ae0668;

}

.aboutBlocks a .circle-container{
    width: 100%;
    overflow: hidden;
}
.aboutBlocks a .circle{
    position: relative;
    top: -10px;
    width: 100%;
    padding-top: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px #c66295 solid;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.aboutBlocks a .circle-container p{
    width: 120px;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -40px;
    margin-right: -60px;
}
.aboutBlocks a:hover{
    color: #fff;
}
.aboutBlocks a:hover>span{
    color: #fff;
}
.aboutBlocks a:hover .circle{
    border-color: #ae0668;
}
.companyFounder{
    border-top: 2px #948A9B  solid;
    background: rgba(255,255,255,.2);
    padding: 10px 0;
}
#about .companyFounder .quote h2{
    margin: 20px 0 5px 0;
    font-size: 26px;
    color: #c66295;
}
.companyFounder .quote{
    position: relative;
    margin-bottom: 20px;
    margin-top: 10px;
}
.companyFounder .quote p{
    padding: 20px 0;
    font-size: 20px;
    margin: 0;
    text-align: justify;
    color: #efefef;
    line-height: 1.3em;
}
.companyFounder .quote>div{
    color: #21c1ff;
    font-size: 30px;
    padding: 0;
}
.companyFounder .quote>div:last-child{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: right;
}
.companyFounder .img img{
    box-shadow: 0 3px 2px #161616;
    margin-top: 40px;
    margin-bottom: 20px;
}
#past-work.page{
    background:#c0c0c0;
    margin-top: 50px;
}
#past-work h2{
    color: #50284d;
}
#past-work .container{
    padding-top: 30px;
    padding-bottom: 50px;
}
#past-work .pastBlocks{
    margin-top: 50px;
}
#past-work .pastBlocks>div, #past-work .pastBlocks a{
    padding: 5px;
}
#past-work .pastBlocks>.col-lg-6:first-child{
    padding-left: 2px;
    padding-right: 8px;
}
#past-work .pastBlocks>.col-lg-6:last-child{
    padding-left: 8px;
    padding-right: 2px;
}
#past-work .pastBlocks a img{
    border:2px #fff solid;

}
#past-work .block-img-quarter{
    padding-bottom: 0 !important;
}
#past-work .block-img-oneeight{
    padding-top: 3px !important;
}
#past-work a>.highlight{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #ce1a6e;
    padding: 7px;
    display: none;
}
#past-work .block-img-quarter>.highlight{
    padding-bottom: 2px !important;
}
#past-work .highlight>span{
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    font-size: 50px;
}
#past-work .highlight>span>.icon-container{ 
    width: 80px;
    height: 80px;
    position: absolute;
    text-align: center;
    top: 50%;
    right: 50%;
    margin-right: -40px;
    margin-top: -40px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px #fff dashed;
    padding: 5px;
}

#articles{
    background : url('img/articles-bg.jpg') no-repeat center top;
    background-size: cover;
    color: #fff;
    padding: 20px 0 30px 0;
    overflow: hidden;
}
#articles h4{
    margin-bottom: 40px;
    margin-top: 20px;
}
#articles h3{
    margin-bottom: 20px;
    color: #21c1ff;
}
#articles .item .description{
    font-size: 18px;
    text-align: justify;
}
#articles .item button{
    font-size: 20px;
    border-radius: 10px;
    border: 2px #21c1ff dotted;
    padding: 10px 30px;
    text-align: center;
    outline: none;
    color: #fff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    background: none;
}
#articles .item button:hover{
    border-style: solid;
    border-color: #fff;
    color: #21c1ff;

}
#articles .item .attachment-slideImage{
    border-radius: 10px;
}
#articles .carousel-control.left,#articles .carousel-control.right{
    background: none;
}

#clients{
    background: #c2c9cc;
    padding: 40px 0;
}
#clients h2{
    color: #50284d;
    margin: 0;
}
#clients h4{
    margin-bottom: 40px;
    margin-top: 20px;
    color: #ae0668
}
#clients .item .attachment-slideImage{
    border-radius: 10px;
    margin-bottom: 20px;

}
#clients .item .col-xs-6:nth-child(1) .slideImage,#clients .item .col-xs-6:nth-child(2) .slideImage{

}

#clients .carousel-control.left,#clients .carousel-control.right{
    background: none;
    color: #50284d;
}

#contact {
    background : url('img/contact-bg.jpg') no-repeat center top;
    background-size: cover;
    color: #fff;
}
#contact .container{
    padding: 30px 15px;
}
#contact .map{
    border-radius: 5px;
    border: 5px rgba(255,255,255,.1) solid;
}
#contact a{
    text-decoration: none;
    color: #fff;
    display: block;
}
#contact .contact-data{
    font-size:26px;
    font-weight: normal;
}
#contact .contact-data.phone{
    font-size: 20px;
}
#contact .contact-data.address{
    font-size: 20px;
}
#contact.page .contact-data{
    font-size:36px;
}
#contact.page .contact-data.phone{
    font-size: 36px;
}
#contact.page .contact-data.address{
    font-size: 30px;
}

#contact .contact-data .icon{
    font-size: 42px;
    display: inline-block;
    text-align: center;

}
#contact .contact-data .text{
    display: inline-block;
    padding-top: 10px;
    word-wrap: break-word;
}

#contact .social-icons{
    padding-top: 5px;
    text-align: center;
    font-size: 40px;
}
#contact .social-icons .whatsapp img{
	width: auto;
	vertical-align: initial;
	margin-top: 11px;
}
#contact .social-icons .whatsapp img{
	width: auto;
	vertical-align: initial;
	margin-top: 11px;
}
.page #contact .social-icons .whatsapp img{
	width: 55px;
	margin-top: 15px;
}
#contact.page h2{
	color:#c0c0c0;
	margin-bottom:20px;
}
#contact.page .social-icons{
    padding-top: 25px;
    font-size: 60px;
}
#contact.page .social-icons .row:last-child{
	padding-top: 10px;
}
#contact .social-icons a:hover,#contact .social-icons a.active{
    color: #ae0668;
}
#contact .social-icons h2{
    margin: 5px 0 15px 0 ;
}
#contact button{
    font-size: 20px;
    border-radius: 10px;
    border: 2px #21c1ff dotted;
    padding: 10px 30px;
    text-align: center;
    outline: none;
    color: #fff;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    background: none;
}
#contact button:hover{
    border-style: solid;
    border-color: #fff;
    color: #21c1ff; 
}
#newsletter {
    background : url('img/subscribe-bg.jpg') no-repeat center top;
    background-size: cover;
    color: #fff;
}
#newsletter .container{
    padding: 20px 15px 35px;
}
#newsletter h2{
    color: #ae0668;
    padding-bottom:35px; 
}
#newsletter .wysija-paragraph{
    width: 73%;
    float: right;
    padding-left: 2%;
}
#newsletter .widget_wysija input[name="wysija[user][email]"],#newsletter .wysija-submit-field{
    color: #ae0668;
    font-size: 20px;
    width: 100%;
    padding: 0 20px;
    height: 60px;
    border-radius: 15px;
    background: none;
    border: 2px #468db3 solid;
    width: 100%;
    margin-top: 0;

}
@media (max-width:400px){
	#newsletter .wysija-paragraph{
		width:100%;
		padding: 0;
	}
	#newsletter .wysija-submit-field{
		width: 100% !important;
	}
}
#newsletter input::-webkit-input-placeholder {
   color: #ae0668;
}

#newsletter input:-moz-placeholder { /* Firefox 18- */
   color: #ae0668;
}

#newsletter input::-moz-placeholder {  /* Firefox 19+ */
   color: #ae0668;
}

#newsletter input:-ms-input-placeholder {  
   color: #ae0668;
}
#newsletter .wysija-submit-field{
    color: #fff;
    font-size: 20px;
    width: 100%;
    padding: 0 20px;
    height: 60px;
    border-radius: 15px;
    background: rgba(0,0,0,.1);
    border: 2px #468db3 solid;
    width: 25%;
    float: left;
}
#newsletter .wysija-submit-field:hover{
    color: #ae0668;
    background: none;
    border-style: dotted;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}



footer{
    background: #282828;
    color: #fff;
}
footer ul{
    list-style: none;
    padding: 0;
}
footer li{
    padding: 0;
    margin: 10px 0;
    font-size: 18px;
}
footer h3{
    color: #21c1ff;
    font-size: 28px;
}
footer h4{
    font-size: 15px
}
footer a {
    color: #fff;
    text-decoration: none;
}
footer a:hover {
    color: #fff;
    text-decoration: none;
}
footer .logo{
    padding-top: 80px;
}

footer .copyrights{
    font-size: 16px;
    padding: 10px 0;
    margin-top: 30px;
    border-top: 1px #444 solid;
}
.copyrights p{
	margin: 0;
}
footer .copyrights a{
    color: #21c1ff;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;

}
footer .copyrights a:hover{
    color: #ae0668;
}


@media (max-width:1200px){
    #services .caption .description{
        margin: 30px 0;
    }
    #services .caption button{
        margin-bottom: 60px;
    }
}
@media (max-width:400px){
    .aboutBlocks>a{
        width: 100%;
    }
}
@media (max-width:992px){
    .navigators span i{
        padding-bottom: 10px;
    }
}

.embed-container {
	position: relative;
	padding-bottom: 80%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	border: 5px rgba(255,255,255,.1) solid;
}
.embed-container.full{
	padding-bottom: 30%;
	border: none;
}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.article-header{
    background : url('img/slider-bg.jpg') no-repeat center top;
    background-size: cover;
    max-height: 558px;
    color: #fff;
    margin-bottom: 50px;
}
.article-header h1{
	padding: 45px 0;
}
.breadcrumbs{
	font-size: 20px;
	color: #fff;
	padding: 15px 0;
	background: rgba(0,0,0,.2);
	border-top: 1px #fff solid;
}
.breadcrumbs span{
	color: #efefef;
}
.breadcrumbs i{
	padding:  5px;

}
.breadcrumbs a{
	color: #21c1ff;
	text-decoration: none;
}
.breadcrumbs a:hover{
	color: #fff;
}

.banner .attachment-post-thumbnail{
	margin-bottom: 30px;
	border-radius: 5px;
	border: 2px #fff solid;
}
.post .attachment-post-thumbnail{
	width: auto;
	height: auto;
	border-radius: 10px;
	border: 5px #fff solid;
	margin: 0 10px 10px 0;
	float: left;
}
#article{
	font-size: 16px;
}
.dropdown-menu li:not(:last-child){
	border-bottom: 1px solid #525252;
}
.companyFounder .btn{
	padding: 10px 30px;
	background: none;
	border-radius: 10px;
	border: 2px #21c1ff dashed;
	font-size: 22px;
	color: #fff;
	margin-bottom: 20px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	background: none;
	
}
.companyFounder .btn:hover{
	padding: 10px 30px;
	background: rgba(255,255,255,0.2);
	color: #21c1ff;
	border: 2px #efefef solid;
}

/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/
 
/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
  display: none;
}
 
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}
.fb-like-box {
	margin: 20px 0 ;	
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-bottom: 20px;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.category h2{
	color: #ae0668;
}
.more-link .btn{
	border-radius: 10px;
	border: 2px #ae0668 dashed;
	padding: 10px 20px;
	color: #ae0668;
	background: none;
	margin-bottom: 20px;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
.more-link .btn:hover{
    color: #ae0668;
    background: #fff;
    border-style: solid;

}
.cat-thumb .attachment-post-thumbnail{
	border-radius: 10px;
	border: 5px #fff solid;
	margin: 20px 10px 10px 10px;
}

.entry-meta {
	padding-bottom: 5px;
}

#error404{
    background : url('img/slider-bg.jpg') no-repeat center top;
    background-size: cover;
    color: #fff;
    padding-top: 60px;
}
#error404 img{
	z-index: 2;
}
#error404 .text{
	background: rgba(255,255,255,.1);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px rgba(181,10,105,.2) solid;
	position: relative;
	top: -100px;
	padding: 120px 20px 50px 20px;
	margin-bottom: -101px;
	z-index: 1;
	font-size: 30px;
	color: #ae0668;
	text-shadow: 0 1px #fff;
}
#error404 .text span{
	color: #282828;
}
#error404 .text span:last-child{
	font-size: 26px;
}
.nav-links{
	margin: 20px auto;
}
.nav-links i{
	color: #ae0668;
}

img.avatar{
    width:auto !important ;
}